import AppContainer from '@/components/AppContainer';

import QueryFilter from '@/components/QueryFilter';
import Toolbar from '@/components/Toolbar';
import useAntdList from '@/hooks/useAntdList';
import useAntdModal from '@/hooks/useAntdModal';
import { queryApps } from '@/service/deliver';

import { queryCertificate } from '@/service/globalSetting';
import { Button, Image, Form, Input, Table, Space } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { useHistory } from 'react-router-dom'
import React from 'react';
import SaveApp from './components/SaveApp';
import { PlusOutlined } from '@ant-design/icons';
import useQuery from '@/hooks/useQuery';

const AppList = () => {
  let [form] = Form.useForm()
  const history = useHistory();
  const query = useQuery()
  const { tableProps, search, refresh } = useAntdList(queryApps, { form })
  const saveApp = useAntdModal({ refresh })
  const saveCertificate = useAntdModal()
  const columns: ColumnsType<any> = [{
    title: 'ID',
    dataIndex: 'id'
  }, {
    title: '项目名称',
    dataIndex: 'name'
  },  {
    title: 'git地址',
    dataIndex: 'gitUrl'
  }, {
    title: '创建人',
    dataIndex: 'createdBy'
  }, {
    title: '更新时间',
    dataIndex: 'updatedAt'
  },  {
    title: '创建时间',
    dataIndex: 'createdAt'
  }, {
    title: '操作',
    render(_) {
      return <Space>
        <Button type='link' onClick={() => saveApp.openModal(_, { title: '编辑应用' })}>编辑</Button>
        <Button type='link' onClick={() => {
          history.push('/deliver/project/detail')
        }}>项目详细</Button>
      </Space>
    }
  }
  ]

  return (
    <AppContainer boundary={false} queryFilter={
      <QueryFilter form={form} submit={search.submit} reset={search.reset} >
        <Form.Item label="名称"> <Input /></Form.Item>
        <Form.Item label="类型"> <Input /></Form.Item>
        <Form.Item label="值"> <Input /></Form.Item>
        <Form.Item label="值"> <Input /></Form.Item>

      </QueryFilter>
    }
      toolbar={<Toolbar leftRender={<Button  type='primary'  icon={<PlusOutlined />} onClick={() => saveApp.openModal({}, { title: '创建应用' })}>创建应用</Button>} />}
    >
      <SaveApp {...saveApp} />
      <Table
        rowKey="id"
        columns={columns}
        {...tableProps}

        onChange={(pagination) => {
          // setPage(pagination.current);
        }}
      // pagination={{ total, current: page, pageSize: 5, simple: true }}
      />

    </AppContainer>)
}
export default AppList